<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PanelAPI</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrapEx.css">
    <link rel="stylesheet" href="../js/prettyPrint/css/prettify.css">
    <link rel="stylesheet" href="api.css">


    <script src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/prettyPrint/js/prettify.js"></script>
</head>

<body onload="prettyPrint()">
    <div class="container-fluid">
        <div class="">
            <div class="span12">
                <h1>属性</h1>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.Panel </h3> 
                添加引用
                <pre class="prettyprint linenums"><code> &lt;link rel=&quot;stylesheet&quot; href=&quot;../../css/bootstrap.min.css&quot;&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;../../css/bootstrapEx.css&quot;&gt;
 
 &lt;script src=&quot;../../js/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/bootstrapEx2.0.js&quot;&gt;&lt;/script&gt;</code></pre>
                <p>继承自bsEx.ui.base:</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-2 col-sm-2">属性名称</div>
                        <div class="col-xs-2 col-sm-2">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-5 col-sm-5">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">id</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">bsEx.getId()</div>
                        <div class="col-xs-5 col-sm-5">控件ID</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">renderto</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-5 col-sm-5">绘制到容器的对象或选择器</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">type</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">Panel</div>
                        <div class="col-xs-5 col-sm-5">控件类型</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">firstInit</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">false</div>
                        <div class="col-xs-5 col-sm-5">第一次加载是否完成</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">language</div>
                        <div class="col-xs-2 col-sm-2">bsEx.language</div>
                        <div class="col-xs-3 col-sm-3">bsEx.language.zhCN</div>
                        <div class="col-xs-5 col-sm-5">当前语言包</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">cls</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">""</div>
                        <div class="col-xs-3 col-sm-3">自定义样式 在绘制之前会在renderto加入该样式</div>
                    </div>
                </div>
                <p>控件实例属性:</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-2 col-sm-2">属性名称</div>
                        <div class="col-xs-2 col-sm-2">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-5 col-sm-5">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">showhead</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">true</div>
                        <div class="col-xs-5 col-sm-5">是否显示头</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">showtitle</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">true</div>
                        <div class="col-xs-5 col-sm-5">是否显示标题</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">showfooter</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">true</div>
                        <div class="col-xs-5 col-sm-5">是否显示页脚</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">title</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">标题</div>
                        <div class="col-xs-5 col-sm-5">标题</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">headcls</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">""</div>
                        <div class="col-xs-5 col-sm-5">自定义头样式</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">bodycls</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">""</div>
                        <div class="col-xs-5 col-sm-5">自定义body样式</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">footercls</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">""</div>
                        <div class="col-xs-5 col-sm-5">自定义脚样式</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">headel</div>
                        <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-5 col-sm-5">头部对象 包含标题</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">bodyel</div>
                        <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-5 col-sm-5">主题内容对象</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">body</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">""</div>
                        <div class="col-xs-5 col-sm-5">body填充</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">footerel</div>
                        <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-5 col-sm-5">脚对象 包含按钮</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">encollapse</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">false</div>
                        <div class="col-xs-5 col-sm-5">是否禁用展开</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">expanded</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">true</div>
                        <div class="col-xs-5 col-sm-5">当前展开状态</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">btns</div>
                        <div class="col-xs-2 col-sm-2">数组[bsEx.Button]</div>
                        <div class="col-xs-3 col-sm-3">[]</div>
                        <div class="col-xs-5 col-sm-5">按钮</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">btnsAlign</div>
                        <div class="col-xs-2 col-sm-2">枚举 左left 右right 中center</div>
                        <div class="col-xs-3 col-sm-3">left</div>
                        <div class="col-xs-5 col-sm-5">按钮的布局</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">btnPosition</div>
                        <div class="col-xs-2 col-sm-2">枚举 标题title 脚foot </div>
                        <div class="col-xs-3 col-sm-3">title</div>
                        <div class="col-xs-5 col-sm-5">按钮在标题title还是脚foot </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">width</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">auto</div>
                        <div class="col-xs-5 col-sm-5">初始宽度</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">height</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">auto</div>
                        <div class="col-xs-5 col-sm-5">初始高度</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> new bsEx.Panel({
     renderto:"#panel3",
     title:"不带头部和底部的面板",
     showhead:false,
     showfooter:false,
     body: '普通面板高度随内容增加,这个面板没有头部和底部',
     btns:[{id:"btn_save",text:"保存",btntype:"primary"},{id:"btn_close",text:"取消"}]
 });</code> </pre>
                <hr/>
            </div>
        </div>
        <div class="">
            <div class="span12">
                <h1>方法</h1>
                <hr/>
            </div>
            <div class="">
                <h3>init() <small>返回类型: 无</small></h3>
                <p>绘制方法 new bsEx.Panel(object); 会自动绘制</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>collapse() <small>返回类型: 无</small></h3>
                <p>收起|折叠面板</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>bsEx.ui.panel1.collapse();</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>expand() <small>返回类型: 无</small></h3>
                <p>展开面板</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>bsEx.ui.panel1.expand();</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>setwidth(w) <small>返回类型: 无</small></h3>
                <p>设置宽度</p>
               <h4>示例</h4>
               <pre class="prettyprint linenums"><code>略</code> </pre>
               <hr/>
            </div>
            <div class="">
                <h3>setheigth(h) <small>返回类型: 无</small></h3>
                <p>设置高度 由body高度决定版面高度，所以总体高度h = body高度+头高度+底部高度</p>
               <h4>示例</h4>
               <pre class="prettyprint linenums"><code>略</code> </pre>
               <hr/>
            </div>
        </div>
        <div class="">
            <div class="span12">
                <h1>事件</h1>
                <hr/>
            </div>
            <div class="">
                <h3>beforeinit(t) <small>返回类型: 无</small></h3>
                <p>绘制前事件，执行init()后第一个执行，可以对实例进行操作影响init执行</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>inited(t) <small>返回类型: 无</small></h3>
                <p>绘制后事件，执行init()后执行</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>beforeexpand(t) <small>返回类型: 无</small></h3>
                <p>展开之前执行</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>expand(t) <small>返回类型: 无</small></h3>
                <p>展开完成后执行 此时expanded为true</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>beforecollapse(t) <small>返回类型: 无</small></h3>
                <p>收起之前执行</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>collapse(t) <small>返回类型: 无</small></h3>
                <p>收起完成后执行 此时expanded为false</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
        </div>
</body>
<script>
      $(document).ready(function () {
          $.each($(".table").find(".row div"),function(i,t){
              $(t).removeClass("col-xs-3 col-sm-3");
          });
          $.each($(".table").find(".row"),function(i,t){
              $(t).find("div").eq(0).addClass("col-xs-2 col-sm-2");
              $(t).find("div").eq(1).addClass("col-xs-2 col-sm-2");
              $(t).find("div").eq(2).addClass("col-xs-3 col-sm-3");
              $(t).find("div").eq(3).addClass("col-xs-5 col-sm-5");
          });
      });
</script>
</html>